<template>
  <div>
    <el-card>
      <el-button @click="visible = true">新增模板</el-button>
      <el-table :data="list">
        <el-table-column label="模板类型" prop="templateType">
          <template #default="{row}">
            <span v-if="row.templateType === 1">同城寄</span>
            <span v-else-if="row.templateType === 2">省内寄</span>
            <span v-else-if="row.templateType === 3">经济区互寄</span>
            <span v-else>跨省</span>
          </template>
        </el-table-column>
        <el-table-column label="运送类型" prop="transportType">
          <template #default="{row}">
            <span v-if="row.transportType === 1">普快</span>
            <span v-else>特快</span>
          </template>
        </el-table-column>
        <el-table-column label="关联城市" prop="associatedCityList">
          <template #default="{row}">
            <span v-if="row.associatedCityList[0] === '1'">全国</span>
            <span v-else-if="row.associatedCityList[0] ==='2'">京津冀</span>
            <span v-else-if="row.associatedCityList[0] ==='3'">江浙沪</span>
            <span v-else-if="row.associatedCityList[0] ==='4'">川渝</span>
            <span v-else>黑吉辽</span>
          </template>
        </el-table-column>
        <el-table-column label="首重" prop="firstWeight" />
        <el-table-column label="续重" prop="continuousWeight" />
        <el-table-column label="轻抛系数" prop="lightThrowingCoefficient" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button @click="edit(row.id)">编辑</el-button>
            <el-button @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增和编辑弹出层 -->
    <popup-template ref="popup" :visible.sync="visible" @UpdateTemplate="freightList" />
  </div>
</template>

<script>
import { deleteStencilAPI, freightStencilListAPI } from '@/api/basicData'
import { Message } from 'element-ui'
import popupTemplate from './components/popup-template.vue'

export default {
  components: { popupTemplate },

  data() {
    return {
      list: [],
      // 开启或隐藏弹出层
      visible: false
    }
  },
  created() {
    this.freightList()
  },
  methods: {
    // 模板列表
    async freightList() {
      const res = await freightStencilListAPI()
      this.list = res.data
      console.log('this.list  ----->  ', this.list)
    },
    // 删除模板功能
    async del(id) {
      await deleteStencilAPI(id)
      Message.success('删除成功')
      this.freightList()
    },
    edit(id) {
      this.visible = true
      this.$refs.popup.freightEdit(id)
    }

  }
}
</script>

<style>

</style>
